import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

let scene = new THREE.Scene();

let geometry = new THREE.BufferGeometry();
let vertexs = new Float32Array([
  0, 0, 0,
  50, 0, 0,
  0, 100, 0,

  0, 0, 25,
  0, 0, 125,
  50, 0, 25
]);
geometry.attributes.position = new THREE.BufferAttribute(vertexs, 3);

// 使用缓冲属性创建颜色属性
let colors = new Float32Array([
  1, 0, 0,
  0, 1, 0,
  0, 0, 1,

  1, 1, 0,
  0, 1, 1,
  1, 0, 1
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

// 材质
let material = new THREE.PointsMaterial({
  // 指明需要位顶点渲染颜色
  vertexColors: THREE.VertexColors,
  size: 10
});

// 点对象
let points = new THREE.Points(geometry, material);
scene.add(points);

// 线对象
let lines = new THREE.Line(geometry, material);
scene.add(lines);

// 网格对象
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 相机
let width = window.innerWidth,
    height = window.innerHeight,
    k = width / height,
    s = 200,
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

// 渲染器
let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xaaaaaa);
document.body.appendChild(renderer.domElement);

// 坐标辅助
let axesH = new THREE.AxesHelper(200);
scene.add(axesH);

// 启动渲染
function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

// 控制器
new OrbitControls(camera, renderer.domElement);